<template>
    <el-row class="min-h-screen">
        <el-col :lg="9" :md="12" class="pug-login-left">
            <h2 class="pug-login-tit">欢迎回来</h2>
            <div class="pug-login-info">
                <span class="pug-line"></span>
                <span>账号密码登录</span>
                <span class="pug-line"></span>
            </div>
            <el-form ref="formRef" :model="form" class="w-[250px]" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model.trim="form.username" type="text" maxlength="20" minlength="3"
                        placeholder="请输入用户名">
                        <template #prefix>
                            <el-icon>
                                <user />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model.trim="form.password" @keydown.enter="onSubmit" type="password" maxlength="20" minlength="3"
                        placeholder="请输入密码">
                        <template #prefix>
                            <el-icon>
                                <lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model.trim="form.code" @keydown.enter="onSubmit" style="position:relative"  maxlength="4" minlength="4"
                        placeholder="请输入验证码">
                        <template #prefix>
                            <el-icon>
                                <lock />
                            </el-icon>
                        </template>
                    </el-input>
                    <img :src="captchaObj.img"
                            alt=""
                            title="点击更换"
                            @click="changecode"
                            style="position: absolute;right:3px;top:3px;height: 25px;">
                   
                </el-form-item>
                <el-form-item>
                    <el-button round color="#626aef" class="w-[250px]" type="primary" :loading="loading" @click="onSubmit">登 录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :lg="15" :md="12" class="pug-login-right">
            <div class="text-center">
                <img src="~@/assets/img/hero_img.png" alt="">
                <div class="font-bold text-5xl text-light-50 mb-4 mt-9">欢迎光临</div>
                <div class="text-gray-200 text-sm">此站点是《vue3 + vite实战商城后台开发》视频课程的演示地址</div>
            </div>
        </el-col>
    </el-row>

</template>

<script setup>
   import {useLoginFunc} from '@/api/Login.js'  
   const { 
        form,
        changecode,
        onSubmit,
        rules,
        captchaObj,
        formRef,
        loading
    } = useLoginFunc()

</script>

<style>
.pug-login-left {
    @apply bg-light-50 flex items-center justify-center flex-col;
    background: url('/src/assets/img/banner.png');
    background-size: cover;
}

.pug-login-tit {
    @apply font-bold text-3xl text-gray-800;
}

.pug-login-info {
    @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
}

.pug-line {
    @apply h-[1px] w-16 bg-gray-200;
}

.pug-login-right {
    @apply flex items-center justify-center bg-indigo-500;
}
</style>
